<template>
	<div class="login-container">
		<el-card class="login-form">
			<div slot="header">欢迎登入JEEIDP</div>
			<el-form :model="loginForm" ref="loginForm" status-icon :rules="loginRules" label-width="80">
				<el-form-item label="用户名" prop="username">
					<el-input type="text" v-model="loginForm.username" autocomplete="off" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input type="password" v-model="loginForm.password" autocomplete="off" maxlength="50"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
					<el-button @click="resetForm('loginForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				loginForm: {
					username: "admin",
					password: "123456"
				},
				loginRules: {
					username: [{
							required: true,
							message: "必填"
						},
						{
							min: 3,
							max: 10,
							message: "长度在 3 到 10 个字符"
						}
					],
					password: [{
							required: true,
							message: "必填"
						},
						{
							min: 3,
							max: 10,
							message: "长度在 3 到 10 个字符"
						}
					]
				}
			};
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate(valid => {
					let loginParam = {
						username: this.loginForm.username,
						password: this.loginForm.password
					};
					if (valid) {
						this.$api.post('/login/login', loginParam, {
							headers: {
								Authorization: "noAuth"
							}
						}).then(response => {
							if (response.code === "900") {
								sessionStorage.setItem("access_token", response.data.token);
								this.$router.push({
									name: "app.home"
								});
							}
						});
					} else {
						//this.$message.error('error submit!!');
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login-container {
		position: fixed;
		height: 100%;
		width: 100%;
		background-color: #fff;
		background-image: url("../../assets/images/login-bg.jpg");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;

		.login-form {
			position: absolute;
			top: 50%;
			right: 15%;
			transform: translateY(-50%);
			width: 350px;
			background-color: #fff;
		}
	}
</style>
